<template>
  <view class="page">
    <view class="head" :style="{ backgroundImage: `url(${sign_bg})` }">
      <view class="title">账号密码登录</view>
    </view>
    <view class="main">
      <form :model="user" ref="form" class="form">
        <view class="field-view">
          <view class="field">
            <view class="field-value">
              <v-input
                class="text-input v-input"
                type="text"
                v-model="user.account"
                placeholder="请输入账号"
                key="3"
              />
            </view>
          </view>
        </view>
        <view class="field-view">
          <view class="field">
            <view class="field-value">
              <v-input
                type="password"
                v-model="user.password"
                placeholder="请输入密码"
                class="v-input"
              >
              </v-input>
            </view>
          </view>
        </view>
        <button
          class="btn btn-primary"
          :class="{ disabled }"
          :disabled="disabled"
          @click="submit"
        >
          登录
        </button>
        <view class="funs">
          <text class="code-login" @click="onBack">验证码登录</text>
          <text class="forget-password" @click="onForget">忘记密码？</text>
        </view>
      </form>
    </view>

    <Message ref="message"></Message>
  </view>
</template>

<script>
import detailModule from "@/common/mixins/detail-module";
import { login, getUser } from "@/common/api/user.js";
import { mapState, mapActions, mapMutations } from "vuex";
import { imgBaseUrl, imgBaseUrlV0, imgBaseUrlV1 } from "@/common/config";
import vInput from "@/components/public/input/input";

export default {
  mixins: [detailModule],
  components: {
    vInput,
  },
  computed: {
    disabled() {
      return this.user.account.length < 3 || this.user.password.length < 3;
    },
  },
  data() {
    return {
      imgBaseUrlV0,
      logo: imgBaseUrlV1 + "logo_108.png",
      sign_bg: imgBaseUrlV1 + "sign_bg.png",
      user: {
        account: "",
        password: "",
      },
      rules: {
        account: [
          {
            required: true,
            type: "string",
            message: "账号不能为空",
            trigger: ["blur", "change"],
          },
        ],
        password: [
          {
            required: true,
            type: "string",
            message: "密码不能为空",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onLoad(q) {
    if (q.phone && !this.user.account) {
      this.user.account = q.phone;
    }
    this.init();
    this.$nextTick(() => {
      // this.$refs.form.setRules(this.rules);
    });
  },
  methods: {
    ...mapActions("User", [
      "login",
      "phoneLogin",
      "getUserInfo",
      "getLoginSession",
    ]),
    init() {},
    async onLogin() {
      uni.showLoading({
        title: "登录中",
      });
      // let code = await this.getLoginSession();
      // #ifdef MP
      let code = await this.getLoginSession();
      // #endif

      // #ifndef MP
      let code = "";
      // #endif
      return this.phoneLogin({
        ...this.user,
        mini_code: code,
      })
        .then(async (res) => {
          if (res.code !== this.$ERR_OK) {
            uni.hideLoading();
            return this.message.error(res.message || "登录失败");
          }
          let u = await this.getUserInfo();
          uni.hideLoading();
          console.log(u, "??u");
          if (u && u.code === this.$ERR_OK) {
            uni.reLaunch({
              url: "/pages/tabbar-pages/tabbar-pages",
            });
          }
        })
        .catch((err) => {
          uni.hideLoading();
        });
    },
    submit() {
      const that = this;
      that.onLogin();
      // this.$refs.form.validate((valid) => {
      //   if (valid) {
      //     that.onLogin();
      //   }
      // });
    },
    onBack() {
      uni.navigateBack({
        delta: 1,
      });
    },

    onForget() {
      this.$Router.push({
        path: "/pages/mine/modify",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
$color-primary: #3f7dff;
.page {
  position: relative;
  min-height: calc(100vh - var(--window-top));
  /* background-color: #113476; */
  background: #fff;
  .head {
    position: relative;
    height: 30vh;
    background-color: $color-primary;
    background-size: 100% 80%;
    > .title {
      position: absolute;
      color: #fff;
      font-size: 48rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      bottom: 50rpx;
      left: 40rpx;
    }
  }
  .bg {
    position: absolute;
    z-index: 1;
    width: 100%;
  }
  .logo {
    position: relative;
    display: block;
    z-index: 1;
    top: 140rpx;
    width: 180rpx;
    margin: auto;
  }
}

.main {
  position: relative;
  z-index: 2;
  padding: 60rpx 30rpx;

  .title {
    padding-top: 120rpx;
    padding-bottom: 80rpx;
    display: block;
    text-align: center;
    font-size: 44rpx;
    color: #fff;
    letter-spacing: 3rpx;
  }

  .field-view {
    display: flex;
    flex-direction: row;
    margin-bottom: 30rpx;
    background-color: #f6f6f6;
    border-radius: 10rpx;
    overflow: hidden;

    .field {
      flex: 1;

      &:nth-child(2) {
        margin-left: 90rpx;
      }
      .field-value {
        // border: 3rpx solid #eeeeee;
        color: #434343;
        display: flex;
        flex-direction: row;

        &.inline-block {
          display: inline-block;
        }
        .input {
          flex: 1;
        }

        .placeholder {
          color: #838383;
        }
        .icon {
          margin-left: 20rpx;
        }
      }
    }
  }
  .btn {
    margin-top: 70rpx;
    background: $color-primary;
  }
  .funs {
    display: flex;
    flex-direction: row;
    padding-top: 10rpx;
    color: $color-primary;
    font-size: 26rpx;

    .code-login {
      flex: 1;
      padding-bottom: 30rpx;
      padding-top: 20rpx;
    }
    .forget-password {
      flex: 1;
      text-align: right;
      padding-bottom: 30rpx;
      padding-top: 20rpx;
    }
  }
}
</style>